<!--
 * @Author: ZhaoZhiqi
 * @Date: 2024-09-03 16:38:32
 * @LastEditors: ZhaoZhiqi
 * @LastEditTime: 2024-12-13 10:22:43
 * @Description: 
 * @FilePath: \charging-mini\充电项目\pages\cards.vue
-->
<template>
    <div class="container">
        <HeaderBar>
            <template slot="titleBar">
                <div class="header">我的实体卡</div>
            </template>
        </HeaderBar>

        <template v-if="userInfo.phone">
            <div class="wrapper">
                <div class="add" @click="showModal">添加实体卡</div>
                <div class="recharge" @click="showRechargeModal()">实体卡充值</div>
            </div>
            <div v-if="list.length" class="list">
                <div class="card-item" v-for="(item, index) in list" :key="index"
                    @click="link(`/pages/card_detail?cardNo=${item.card_no}`)">
                    <img :src="imgs.cardBg" alt="卡背景" />
                    <div class="card-item-title">{{ item.card_type === 'VIRTUAL' ? '虚拟卡' : '消费卡' }}</div>
                    <div class="card-item-recharge" @click.stop="showRechargeModal(item.card_no)">点击充值</div>
                    <div class="card-item-content">
                        <div class="card-item-num">
                            <div class="label">卡号</div>
                            <div class="value">{{ item.card_no }}</div>
                        </div>
                        <div v-if="item.can_used_stations" class="card-item-station">
                            <div class="label">使用站点</div>
                            <div class="value ellipsis">{{ item.can_used_stations[0] }}{{ item.can_used_stations.length
                                > 1 ? "等" : "" }}</div>
                        </div>
                    </div>
                </div>
            </div>
            <div v-else class="empty">暂无实体卡, 点击上方按钮添加</div>

            <!-- 绑定实体卡 -->
            <ant-modal :visible="visible"
                bodyStyle="padding: 0; width: auto; border-radius: none; background-color: transparent">
                <template #content>
                    <div class="bind-modal">
                        <div class="modal-title">绑定实体卡</div>
                        <div class="modal-input">
                            <input v-model="card_no" type="text" placeholder="请输入卡号" />
                        </div>
                        <div class="modal-footer">
                            <div class="modal-btn" @click="visible = false">取消</div>
                            <div class="modal-btn confirm" @click="bind">确定</div>
                        </div>
                    </div>
                </template>
            </ant-modal>

            <!-- 实体卡充值 -->
            <ant-modal :visible="rechargeVisible"
                bodyStyle="padding: 0; width: auto; border-radius: none; background-color: transparent">
                <template #content>
                    <div class="bind-modal" style="height: 620rpx">
                        <div class="modal-title">充值卡号</div>
                        <div class="modal-input">
                            <input v-model="recharge_card_no" type="text" placeholder="请输入卡号" />
                        </div>
                        <div class="modal-title">充值金额</div>
                        <div class="modal-input">
                            <input v-model="recharge_amount" type="text" placeholder="请输入充值金额(元)" />
                        </div>
                        <div class="modal-footer">
                            <div class="modal-btn" @click="rechargeVisible = false">取消</div>
                            <div class="modal-btn confirm" @click="recharge()">确定</div>
                        </div>
                    </div>
                </template>
            </ant-modal>
        </template>

        <LoginButton v-else reLaunchUrl="/pages/cards"></LoginButton>
    </div>
</template>
<script>
import { getCardsListAPI, bindCardAPI, rechargeAPI } from "../src/api/api";
import HeaderBar from "../src/components/HeaderBar.vue";
import LoginButton from "../src/components/LoginButton.vue";

const app = getApp();
export default {
    components: { HeaderBar, LoginButton },
    data() {
        return {
            isWx: app.globalData.isWx,
            imgs: app.globalData.imgs,
            index: 0,
            visible: false,
            rechargeVisible: false,
            list: [],

            // 绑定卡号
            card_no: "",

            // 充值
            recharge_card_no: "",
            recharge_amount: "",

            userInfo: {},
            inRecharging: false
        };
    },
    onShareAppMessage() { },
    onLoad() {
        this.userInfo = uni.getStorageSync("userInfo") || {};
    },
    onShow() {
        this.userInfo = uni.getStorageSync("userInfo") || {};
        if (this.userInfo.phone) {
            this.getList();
        }
    },
    methods: {
        showModal() {
            this.visible = true;
        },
        link(path) {
            uni.navigateTo({
                url: path,
            });
        },
        showRechargeModal(card_no) {
            this.recharge_card_no = card_no || "";
            this.recharge_amount = '';
            this.rechargeVisible = true;
        },
        // 获取列表
        getList() {
            getCardsListAPI().then((res) => {
                this.list = [...res.physical_card_list]
            });
        },
        // 绑卡
        bind() {
            if (!this.card_no) {
                uni.showToast({
                    title: "请输入卡号",
                    duration: 1500,
                });
                return false;
            }
            bindCardAPI({
                card_no: this.card_no,
            }).then((res) => {
                uni.showToast({
                    title: "绑定成功",
                    duration: 1500,
                });
                this.getList();
                setTimeout(() => {
                    this.visible = false;
                }, 1500);
            });
        },
        // 充值
        recharge() {
            if (this.inRecharging) return false;
            this.inRecharging = true;
            rechargeAPI({
                amount: this.recharge_amount * 100,
                cardNo: this.recharge_card_no,
                payType: this.isWx ? "WECHAT" : "ALIPAY",
            }).then((res) => {
                if (this.isWx) {
                    let chargeData = JSON.parse(res.charge_url);
                    console.log(chargeData)
                    uni.requestPayment({
                        timeStamp: chargeData.timeStamp,
                        nonceStr: chargeData.nonceStr,
                        package: chargeData.package,
                        signType: chargeData.signType,
                        paySign: chargeData.sign,
                        success: () => {
                            uni.showToast({
                                title: "充值成功",
                                icon: "none",
                            });
                            this.rechargeVisible = false;
                            this.getList();
                        },
                        fail: (err) => {
                            console.log("充值成功", err);
                        },
                        complete: () => {
                            this.inRecharging = false;
                            uni.hideLoading();
                        },
                    });
                } else {
                    console.log(JSON.parse(decodeURIComponent(res.charge_url)).tradeNo)
                    uni.requestPayment({
                        provider: "alipay",
                        tradeNO: JSON.parse(decodeURIComponent(res.charge_url)).tradeNo,
                        success: (res) => {
                            if (res.resultCode === "9000") {
                                uni.showToast({
                                    title: "充值成功",
                                    icon: "none",
                                });
                                this.rechargeVisible = false;
                                this.getList();
                            } else {
                                uni.showToast({
                                    title: "充值失败",
                                    icon: "none",
                                });
                            }
                        },
                        fail: (err) => {
                            console.log("充值失败", err);
                        },
                        complete: () => {
                            this.inRecharging = false;
                            uni.hideLoading();
                        },
                    });
                }
            });
        },
    },
    onReady() { },
};
</script>
<style scoped lang="less">
.ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.container {
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow: hidden;
    background-color: #f6f6f6;
    box-sizing: border-box;

    .title {
        width: 160rpx;
        height: 52rpx;
        margin-left: 28rpx;
        display: block;
    }

    .wrapper {
        width: 750rpx;
        box-sizing: border-box;
        padding: 0 28rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .header {
        font-size: 38rpx;
        line-height: 1;
        font-weight: bold;
        margin-left: 28rpx;
        color: #333;
    }

    .add,
    .recharge {
        flex: none;
        width: 330rpx;
        height: 80rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 4rpx dashed #08bfa8;
        border-radius: 16rpx;
        color: #08bfa8;
        margin-top: 30rpx;
        margin-bottom: 30rpx;
        box-sizing: border-box;
        font-size: 26rpx;
    }

    .list {
        overflow: auto;
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding-bottom: 30rpx;

        .card-item {
            flex: none;
            position: relative;
            width: 697rpx;
            height: 240rpx;
            background: linear-gradient(222.93deg, rgba(139, 218, 176, 1) 0%, rgba(8, 191, 168, 1) 100%);
            box-shadow: 0px 16rpx 24rpx rgba(8, 191, 168, 0.16);
            border-radius: 24rpx;
            margin-bottom: 30rpx;
            box-sizing: border-box;
            padding: 40rpx;
            color: #fff;
            display: flex;
            flex-direction: column;
            justify-content: space-between;

            img {
                width: 100%;
                height: 100%;
                position: absolute;
                top: 0;
                left: 0;
            }

            .card-item-title {
                font-size: 36rpx;
                line-height: 1;
                font-weight: bold;
                position: relative;
                z-index: 2;
            }

            .card-item-recharge {
                position: absolute;
                top: 30rpx;
                right: 30rpx;
                font-size: 20rpx;
                z-index: 3;
                width: 120rpx;
                height: 40rpx;
                background-color: #fff;
                color: #08bfa8;
                border-radius: 20rpx;
                display: flex;
                align-items: center;
                justify-content: center;
            }

            .card-item-content {
                display: flex;
                position: relative;
                z-index: 2;

                .card-item-num,
                .card-item-station {
                    width: 50%;
                    flex: none;
                }

                .label {
                    font-size: 24rpx;
                    line-height: 1;
                    opacity: 0.8;
                    margin-bottom: 20rpx;
                }

                .value {
                    font-size: 26rpx;
                    line-height: 1;
                }
            }
        }
    }

    .empty {
        text-align: center;
        color: #9a9a9a;
        font-size: 24rpx;
        margin-top: 60rpx;
    }

    .bind-modal {
        width: 530rpx;
        height: 406rpx;
        background-color: #fff;
        border-radius: 24rpx;
        display: flex;
        flex-direction: column;
        align-items: center;
        box-sizing: border-box;
        padding: 60rpx 50rpx 42rpx;
        background-repeat: no-repeat;
        background-position: center top;
        background-size: contain;
        transition-duration: 0.2s;

        .modal-title {
            width: 100%;
            font-size: 34rpx;
            line-height: r8rpx;
            color: #333;
            font-weight: bold;
            margin-bottom: 28rpx;
        }

        .modal-input {
            background-color: #f4f8fb;
            border-radius: 24rpx;
            width: 430rpx;
            height: 98rpx;
            border: none;
            box-sizing: border-box;
            padding: 29rpx 30rpx;
            margin-bottom: 42rpx;

            input {
                font-size: 28rpx;
                line-height: 40rpx;
                height: 40rpx;
                font-weight: bold;
            }
        }

        .modal-footer {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;

            .modal-btn {
                flex: none;
                width: 200rpx;
                height: 88rpx;
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 30rpx;
                color: #666666;
                background-color: #ededed;
                border-radius: 50rpx;
                font-weight: bold;

                &.confirm {
                    background: linear-gradient(222.93deg, rgba(139, 218, 176, 1) 0%, rgba(8, 191, 168, 1) 100%);
                    color: #fff;

                    &.disabled {
                        opacity: 0.4;
                    }
                }
            }
        }
    }
}
</style>
